<template>
  <div>
    <navs/>
    <div class="article">
      <div class="page-box">
        <div class="task-choice">
          <ul>
            <li>
              <router-link to="/previewFunction" class="link">
                <div class="pic">
                  <img src="../assets/img/taskPages_preview.png" alt="">
                </div>
                <div>
                  <p class="title">预览</p>
                  <p class="detail">分为功能预览、页面预览、项目/板块预览</p>
                </div>
              </router-link>
            </li>
            <li>
              <router-link to="/previewFunction" class="link">
                <div class="pic">
                  <img src="../assets/img/taskPages_price.png" alt="">
                </div>
                <div>
                  <p class="title">报价表</p>
                  <p class="detail">个性化定制服务，个性化的价格</p>
                </div>
              </router-link>
            </li>
            <li>
              <router-link to="/previewFunction" class="link">
                <div class="pic">
                  <img src="../assets/img/taskPages_price.png" alt="">
                </div>
                <div>
                  <p class="title">报价表-单一服务</p>
                  <p class="detail">根据需求，选择单一服务</p>
                </div>
              </router-link>
            </li>
            <li>
              <router-link to="/previewFunction" class="link">
                <div class="pic">
                  <img src="../assets/img/taskPages_price.png" alt="">
                </div>
                <div>
                  <p class="title">配置报价表-流程1</p>
                  <p class="detail">流程1</p>
                </div>
              </router-link>
            </li>
            <li>
              <router-link to="/previewFunction" class="link">
                <div class="pic">
                  <img src="../assets/img/taskPages_price.png" alt="">
                </div>
                <div>
                  <p class="title">配置报价表-流程2-1011</p>
                  <p class="detail">配置报价表-流程2-101</p>
                </div>
              </router-link>
            </li>
            <li>
              <router-link to="/previewFunction" class="link">
                <div class="pic">
                  <img src="../assets/img/taskPages_price.png" alt="">
                </div>
                <div>
                  <p class="title">配置报价表-流程2-100</p>
                  <p class="detail">配置报价表-流程2-100</p>
                </div>
              </router-link>
            </li>
            <li>
              <router-link to="/previewFunction" class="link">
                <div class="pic">
                  <img src="../assets/img/taskPages_price.png" alt="">
                </div>
                <div>
                  <p class="title"> 配置报价表-流程2-200</p>
                  <p class="detail"> 配置报价表-流程2-200</p>
                </div>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import navs from '../components/nav'
  export default {
    name: 'taskPages',
    data() {
      return {

      }
    },
    components: {
      navs
    }
  }
</script>

<style scoped>
  .article {
    width: 100%;
    height: 100%;
    background: #fff;
  }
  .page-box {
    width: 67%;
    margin-left: 28%;
    padding-bottom: 178px;
    margin-top: 50px;
  }
  .task-choice {
    min-width: 600px;
    width: 65%;
  }
  .task-choice li {
    height: 90px;
    border-bottom: 1px solid #FAFAFA;
    border-bottom-width: 1px;
    transition: border-bottom-width 0.3s ease;
    cursor: pointer;
  }
  .task-choice li:hover {
    border-bottom-width: 90px;
  }
  .task-choice li .link {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
  }
  .task-choice li div {
    height: 100%;
  }
  .task-choice li .pic {
    margin: 0 30px;
  }
  .task-choice li .pic img {
    margin-top: 23px;
  }
  .task-choice li p.title {
    font-size: 16px;
    color: #000;
    margin: 23px 0 14px;
  }
  .task-choice li p.detail {
    line-height: 1;
    color: #a3a3ae;
    font-weight: 300;
  }
</style>
